<template>
	<view class="msg_file" @tap="viewFile">
		<view class="file-body u-border-bottom">
			<view class="file-name u-line-2">
				<text class="u-font-28">{{info.name}}</text>
			</view>
			<view class="file-icon" :style="{backgroundColor:fileIcon.bgColor,color:fileIcon.color}">
				<text class="iconfont" :class="fileIcon.icon"></text>
			</view>
		</view>
		<view class="file-foot">
			<text class="u-font-24 text-gray">{{info.size|fileSize}}</text>
		</view>
		<view class="progress" v-if="msg.status=='loading'">
			<view class="inner-bar" :style="{width: `${msg.progress||0}%`}"></view>
		</view>
	</view>
</template>

<script>
	import { jumpTo } from '@/utils/util'
	export default {
		props:{
			info:{
				required:true,
				type:Object
			},
			msg:{
				type:Object,
				required:true
			}
		},
		computed:{
			fileIcon(){
				const name = this.info.name
				if(/\.{1}(rar|zip|arjz|lzh|jar)$/i.test(name)){
					return {
						bgColor:'#92999d',
						color:'#FFFFFF',
						icon:'icon-file-archive'
					} 
				}
				if(/\.{1}(mp3|aac|wav|wma|cda|flac|m4a|mid|mka|mp2|mpa|mpc|ape|ofr|ogg|ra|wv|tta|ac3|dts)$/i.test(name)){
					return {
						bgColor:'#409af7',
						color:'#FFFFFF',
						icon:'icon-file-audio'
					} 
				}
				if(/\.{1}(xls|xlsx|xlsm|et)$/i.test(name)){
					return {
						bgColor:'#56ab7d',
						color:'#FFFFFF',
						icon:'icon-file-excel'
					}
				}
				if(/\.{1}(jpg|jpeg|png|gif)$/i.test(name)){
					return {
						bgColor:'#409af7',
						color:'#FFFFFF',
						icon:'icon-file-image'
					}
				}
				if(/\.{1}(pdf)$/i.test(name)){
					return {
						bgColor:'#e85d58',
						color:'#FFFFFF',
						icon:'icon-file-pdf'
					}
				}
				if(/\.{1}(ppt|pptx)$/i.test(name)){
					return {
						bgColor:'#e87a4e',
						color:'#FFFFFF',
						icon:'icon-file-powerpoint'
					}
				}
				if(/\.{1}(mp4|rmvb|avi|wmv|flv|mkv|webm|mov)$/i.test(name)){
					return {
						bgColor:'#409af7',
						color:'#FFFFFF',
						icon:'icon-file-video'
					}
				}
				if(/\.{1}(doc|docx)$/i.test(name)){
					return {
						bgColor:'#355795',
						color:'#FFFFFF',
						icon:'icon-file-word'
					}
				}
				return {
						bgColor:'#AAAAAA',
						color:'#FFFFFF',
						icon:'icon-filefill'
				}
			}
		},
		filters:{
			fileSize(val){
				if(isNaN(val)){
					return ''
				}
				if(val>1024*1024*1024*1024){
					return `${(val/(1024*1024*1024*1024)).toFixed(1)} TB`
				}else if(val>1024*1024*1024){
					return `${(val/(1024*1024*1024)).toFixed(1)} GB`
				}else if(val>1024*1024){
					return `${(val/(1024*1024)).toFixed(1)} MB`
				}else if(val>1024){
					return `${(val/1024).toFixed(1)} KB`
				}else{
					return `${val} B`
				}
			}
		},
		methods:{
			viewFile(){
				jumpTo(`/pages/preFile/preFile?url=${this.info.fileUrl}&name=${this.info.name}&size=${this.info.size}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_file{
		max-width: 460rpx;
		min-width: 400rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #eeeeee;
		position: relative;
		.file-body{
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
		}
		.file-name{
			flex: 1;
		}
		.file-icon{
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			margin-left: 20rpx;
			border-radius: 10rpx;
			font-size: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.file-foot{
			padding:14rpx 30rpx;
		}
		.progress{
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 14rpx;
			background-color: rgba($color:#000000, $alpha:0.5);
			border-radius: 0 0 10rpx 10rpx;
			overflow: hidden;
		}
		.inner-bar{
			height: 100%;
			background-color: #007aff;
		}
	}
</style>